import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userStore'
import { reqCartList, reqUpdateChecked, reqCheckAllStatus, reqAddCart, reqDelCartGoods } from '@/api/cart'
import { debounce } from 'miniprogram-licia'
import { swiperCellBehaviors } from '@/behaviors/swiperCell'

// 导入miniprogram-computed提供的behavior
const computedBehavior = require('miniprogram-computed').behavior

ComponentWithStore({

    behaviors: [computedBehavior, swiperCellBehaviors],
  
    storeBindings: {
        store: userStore,
        fields: ['token']
    },

    computed: {
        selectAllStatus(data) {
            // computed 中不能通过this来访问data中的数据，如果想访问，可以通过形参的方式

            return data.cartList.length !== 0 &&data.cartList.every((item) => item.isChecked === 1)
        },

        totalPrice(data) {
            let totalprice = 0

            data.cartList.forEach((item) => {
                if(item.isChecked === 1) {
                    totalprice += item.price * item.count
                }
            })

            return totalprice
        }
    },

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {

    // 点击去结算按钮，跳转至结算页面
    toOrder() {
        // 判断是否有选中的商品
        if(this.data.totalPrice === 0) {
            wx.toast({
                title: "请选择需要结算的商品"
            })
            return
        }

        wx.navigateTo({
          url: '/modules/orderPayModule/pages/order/detail/detail',
        })
    },
 

    // 删除商品
    async delCartGoods(event) {
        const { id } = event.currentTarget.dataset

        const dalRes = await wx.modal({
            content: "您是否要删除该商品？"
        })

        if(dalRes) {
            await reqDelCartGoods(id)

            this.showTipGetList()
        }
    },

    // 更新商品数量 防抖方法来解决极短时间内频繁加减购物车商品数量时造成发送请求多次的问题
    changeBuyNum: debounce(async function (event)  {
        // 获取最新的商品数量
        const newBuyNum = event.detail > 200 ? 200 : event.detail

        // 获取商品的id
        const { id, index, oldBuyNum } = event.target.dataset

        // 使用正则表达式判断输入是否在1-200之间，是否合法
        const reg = /^([1-9]|[1-9]\d|1\d{2}|200])$/

        // 对输入进行验证
        const regRes = reg.test(newBuyNum)

        if(!regRes)  {
            this.setData({
                [`cartList[${index}].count`]: oldBuyNum
            })
            return
        }

        // 通过验证计算差值
        const disCount = newBuyNum - oldBuyNum

        // 如果没有改变，则不发送请求
        if(disCount === 0) 
            return

        // 改变了就调用接口
        const res = await reqAddCart({ goodsId: id, count: newBuyNum})

        if(res.code === 200) {
            this.setData({
                [`cartList[${index}].count`]: newBuyNum,
                [`cartList[${index}].isChecked`]: 1
            })
        }
    }, 500),

    // 全选按钮功能实现
    async selectAllStatus(event) {
        // 获取全选按钮状态
        const { detail } = event
        // 对状态赋值
        const isChecked = detail ? 1 : 0
        // 调用接口更新服务器
        const res = await reqCheckAllStatus(isChecked)

        if(res.code === 200) {
            // 两种方式实现
            // 一、重新获取商品列表
            // this.showTipGetList()

            // 二、对cartList进行深拷贝
            const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
            newCartList.forEach((item) => (item.isChecked = isChecked))

            this.setData({
                cartList: newCartList
            })
        }
    },

    // 更新商品状态
    async updateChecked(event) {
        const { detail } = event
        const { id, index } = event.target.dataset
        const isChecked = detail ? 1 : 0

        const res = await reqUpdateChecked(id, isChecked)
        // 第一种实现方式 服务器更新后，重新发送请求获取数据
        // if(res.code === 200) {
        //     this.showTipGetList()
        // }

        // 第二种方式 重新更新本地数据
        this.setData({
            [`cartList[${index}].isChecked`]: isChecked
        })

    },

    // 获取商品列表
    async showTipGetList() {
        // 判断用户是否登录，如果没有登录，提示 '您尚未登录，点击登录获取更多权益'
        const { token } = this.data
        if(!token) {
            this.setData({
                emptyDes: '您尚未登录，点击登录获取更多权益',
                cartList: [],
            })
            return
        }

        // 如果用户登录，进行进一步判断——购物车中是否有商品
        const { code, data: cartList} = await reqCartList()
        if(code === 200) {
            this.setData({
                cartList,
                emptyDes: cartList.length === 0 && '还没有添加商品，快去添加吧～'
            })
        }
    },

      onShow() {
          this.showTipGetList()
      },

      onHide() {
          this.onSwiperCellCommonClick()
      }
  }
})
